<template>
    <p>组合式api 生命周期
        count:{{count}}
        <button @click="onAdd">add</button>
    </p>
</template>

<script setup>
    import {onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated, getCurrentInstance} from 'vue';
    import {defineProps, defineEmits, defineSlots, defineOptions} from 'vue'
    import {ref} from 'vue'
    const props = defineProps(['name'])
    const emits = defineEmits('onadd')

    let count = ref(0);
    
    const instance = getCurrentInstance()

    console.log('set up start');

    onBeforeMount((vm) => {
        console.log(instance)
        console.log('onBeforeMount')
    });
     onMounted((vm) => {
        console.log(instance)
        console.log('onMounted')
    })
     onBeforeUpdate((vm) => {
        console.log('onBeforeUpdate')
    })
     onUpdated((vm) => {
        console.log('onUpdated')
    })
     onBeforeUnmount((vm) => {
        console.log('onBeforeUnmount')
    })
     onUnmounted((vm) => {
        console.log('onUnmounted')
    })

    const onAdd = () => {
        count.value ++
    }
</script>

<style>

</style>